<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货物种类管理页面</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: #2C2255;
            background: url(../image/水漫漫.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 20px;
            font-family: STXingkai;
            color: #59ec0a;
        }

        a {
            text-decoration: none;
        }

        button {
            margin: 10px;
        }

        th {
            width: 300px;

        }

        td {
            width: 200px;
            height: 80px;
        }
    </style>


</head>
<body>
<h1>货物种类管理页面</h1>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>


<!--引入js文件-->
<script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
<script src="../bootstrap/js/bootstrap.js" ></script>
<script src="../vue/vue.js" charset="utf-8"></script>
<script type="text/javascript" src="../css/my.js"></script>
<script src="../echarts/echarts/dist/echarts.js"></script>
<script type="text/javascript">
    //柱状图
    // 基于准备好的dom，初始化echarts实例
    var vm=new Vue({
        el:"#main",
        data:{
            name:["中国","美国"],
            type:["2","1"]
        },
        methods:{	//自定义方法
            getBarChart:function(){
                $.get("../ItemsTypeController/selItemsType",{},function(data){	//通过ajax访问后端数据,进行交互
                    var content=data.list;	//定义data变量,把后端的数据赋给data
                    vm.name=[];
                    vm.type=[];
                    for(var i=0;i<content.length;i++){		//for循环遍历数据
                        vm.name.push(content[i].itemsTypeName);
                        vm.type.push(content[i].itemsAllCounts);
                    }
                    console.log(vm.name);
                    console.log(vm.type);
                    var myChart = echarts.init(document.getElementById('main'));

                    myChart.setOption({
                        title: {
                            text: '商品库存柱状图'
                        },
                        tooltip: {},
                        legend: {
                            data: ['库存']
                        },
                        xAxis: {
                            data:vm.name
                        },
                        yAxis: {
                        },
                        series: [{
                            name: '库存',
                            type: 'bar',
                            data:vm.type
                        }]
                    });
                })
            }
        },
        mounted(){
            this.getBarChart();		//自调用getPie()函数
            this.timer=setInterval(this.getBarChart,500000);	//每秒进行表格数据的更新
        }

    });








    /*//饼状图区域
    // 基于准备好的dom，初始化echarts实例
    var vm=new Vue({
        el:"#main",
        data:{
            dat:[

            ]
        },
        methods:{	//自定义方法
            getPie:function(){
                $.get("../ItemsTypeController/selItemsType",{},function(data){	//通过ajax访问后端数据,进行交互
                    //alert(JSON.stringify(data));
                    var data=data.list;	//定义data变量,把后端的数据赋给data
                    console.log(data);
                    var len=data.length;
                    vm.dat=[];		//清空dat数值的数据,保证数据的准确性
                    for(var i=0;i<len;i++){		//for循环遍历数据
                        var info={};
                        //后端的字段也要变为value:---,name:---
                        info.name=data[i].itemsTypeName;
                        info.value=data[i].itemsAllCounts;
                        vm.dat.push(info);		//循环的数据一值追加到vm.dat数组里面
                    }
                    console.log(vm.dat);
                    let myChart = echarts.init(document.getElementById('main'));

                    myChart.setOption({
                        series : [


                            {
                                name: '货物数量饼状图',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                center: ['50%', '60%'],
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                                    }
                                },
                                data:vm.dat          // 数据数组，name 为数据项名称，value 为数据项值
                            }
                        ]
                    })
                })
            }
        },
        mounted(){
            this.getPie();		//自调用getPie()函数
            this.timer=setInterval(this.getPie,500000);	//每秒进行表格数据的更新
        }

    });*/

</script>

</body>
</html>